<template>
  <el-dialog title="选择报告模板" :visible.sync="visible" append-to-body>
    <div class="temp-block">
      <template v-for="(reportItem, index) in reportList">
        <div :key="index" :class="{'temp-item': true, 'select': index === selectIndex}">
          <span class="el-icon-check" @click="() => {handleChange(index)}" />
          <div style="text-align:center;">
            {{ reportItem.name }}
          </div>
          <span v-html="reportItem.content" />
        </div>
      </template>
      <Empty :visible="reportList.length === 0" />
    </div>
    <div slot="footer" class="footer">
      <el-button size="mini" @click="handleClose">
        取消
      </el-button>
      <el-button size="mini" type="primary" @click="handleOk">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fetchDropReportList } from '@/api/commonDropDown'
import Empty from '@/components/Empty'
export default {
  name: 'ReportTemplateSelect',
  components: { Empty },
  data() {
    return {
      visible: false,
      reportList: [],
      selectIndex: -1
    }
  },
  methods: {
    open() {
      this.$data.visible = true
      this.$data.selectIndex = -1
      this.$data.reportList.length === 0 && this.postReportTemplateList()
      return new Promise((resolve, reject) => {
        this.monitor = { resolve, reject }
      })
    },
    postReportTemplateList() {
      fetchDropReportList().then(res => {
        this.$data.reportList = res
      })
    },
    handleChange(index) {
      this.$data.selectIndex = index
    },
    handleClose() {
      this.$data.visible = false
    },
    handleOk() {
      if (this.$data.selectIndex === -1) {
        this.$message.warning('请选择模板')
        return
      }
      const select = this.$data.reportList[this.$data.selectIndex]
      this.monitor.resolve({ title: select.name, content: select.content })
      this.handleClose()
    }

  }
}
</script>

<style lang="scss" scoped>
.temp-block {
  overflow: auto;
    max-height: calc(100vh - 300px);
}
  .temp-item {
    border: 1px solid #dee2f3;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 6px;
    position: relative;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 10px;

    &.select{
      border-color:  #566CF5;

      .el-icon-check {
        color: #566CF5;
      }
    }

    .el-icon-check {
      position: absolute;
      right: 3px;
      top: 3px;
      font-size: 20px;
      cursor: pointer;
    }
  }
</style>
